import React from "react";
import * as echarts from "echarts";
import net from "../../services/net";
const xian = require("./xian.json");
import "./index.scss";
// const img = "https://static.justdodo.cn/xiaohan/38c2b6dda19064af5c7806fbf266fafd2d5dd73a.svg";

const data = [
	{
		name: "高新万科华府",
		value: ["108.952353", "34.26467", 10005]
	},
	{
		name: "绿地国港城一期26、27#",
		value: ["109.05282", "34.396383", 11000]
	}
];

class Ok extends React.Component {

	constructor(props) {
		super(props);
	}

	dealOption(data) {
		return {
			title: {
				text: "西安市房价统计",
				x:"center"
			},
			tooltip: {
				trigger: "item",
				formatter: function (params) {
					return params.name + " : " + params.value[2] + "元";
				}
			},
			dataRange:{
				min: 5000,
				max: 30000,
				text:["高","低"],
				realtime:true,
				calculable:true,
				color:["orangered","yellow","green"]
			},
			geo: {
				map: "xian",
				label: {
					emphasis: {
						show: false
					}
				},
				itemStyle: {
					normal: {
						areaColor: "#323c48",
						borderColor: "#111"
					},
					emphasis: {
						areaColor: "#2a333d"
					}
				}
			},
			series: [
				{
					name: "pm2.5",
					type: "scatter",
					coordinateSystem: "geo",
					data: data,
					// symbol:`image://${img}`,
					symbolSize: 14,
					label: {
						normal: {
							show: false
						},
						emphasis: {
							show: false
						}
					},
					itemStyle: {
						emphasis: {
							borderColor: "#fff",
							borderWidth: 1
						}
					}
				}
			]
		};
	}

	async componentDidMount() {
		let result = await net.get("https://testapi.justdodo.cn/api/houses?pageCount=100000");
		console.log(result.data.list);
		if(result && result.data) {
			const list = result.data.list;
			// const data = [];
			list.forEach(item => {
				const price = item.prices.reduce((cur, next) => Number(cur) + Number(next), 0);
				const ave = price / item.prices.length || 0;
				data.push({
					name: item.title,
					value: [item.lng, item.lat, ave]
				});
			});
			echarts.registerMap("xian", xian);
			const chart = echarts.init(document.getElementById("map"));
			chart.setOption(this.dealOption(data));
		}
		
	}
	render() {
		return (
			<div id="map"></div>
		);
	}
}


export default Ok;